<template>
  <div class=" p-3">
    <div class="card h-100">
      <div class="card-header text-center">
        收信箱
      </div>
      <div class="card-body ">
          <div class="row " style="margin-top: 5px;" v-for="mail in currentPageData">
            <div class="col-2 text-nowarp text-truncate text-danger" v-text="mail.recetitle"></div>
            <div class="col-5 text-nowarp text-truncate text-body" v-text="mail.rececontent"></div>
            <div class="col-2 text-nowarp text-truncate" v-text="mail.recedate"></div>
            <div>
              <button class="btn btn-danger text-nowarp" data-toggle="modal" :data-target="'#myModacard'+mail.receid" @click="opencard()">
                  <span>查看</span>
              </button>
              <button class="btn btn-danger" @click="shanchu(mail.receid)">删除</button>
             <button class="btn btn-danger text-nowarp" data-toggle="modal" :data-target="'#huifu'+mail.receid" @click="openhuifu()">
                 <span>回复</span>
             </button>
            </div>
            <!--详情模态框开始-->
            <div class="modal fade" style="margin-top: 80px;" :id="'myModacard'+mail.receid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabelcard" v-text="mail.recetitle"></h4>
                  </div>
                  <div class="modal-body" style="text-align: center">
                    <!-- 内容开始 -->
                      <div style="text-align: left;"><span>发件人:</span><p style="display: inline-block;" v-text="mail.sendpeople"></p></div>
                      <div style="text-align: left;"><span>收件人:</span><p style="display: inline-block;" v-text="mail.recepeople"></p></div>
                      <div style="text-align: left;"><span>时间:</span><p style="display: inline-block;" v-text="mail.recedate"></p></div>
                      <span style="float: left;">内容:&nbsp;</span><p style="float: left;text-align: left;" v-text="mail.rececontent"></p>
                    <!-- 内容结束 -->
                  </div>
                  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
              </div>
            </div>
            <!-- 模态框结束 -->
			<!--回复模态框开始-->
			<div class="modal fade" style="margin-top: 80px;" :id="'huifu'+mail.receid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <h4 class="modal-title" id="myModalLabelcard" v-text="mail.recetitle"></h4>
			      </div>
			      <div class="modal-body" style="text-align: center">
			        <!-- 内容开始 -->
			          <div style="text-align: left;"><span>回复标题:</span><input onkeyup="this.value=this.value.replace(/\s+/g,'')"  :id="'huifutitle'+mail.receid" type="text" placeholder="请输入标题"></div>
			          <div style="text-align: left;"><span>回复内容:</span><textarea required  style="margin-top: 5px;" name="" :id="'huifucontent'+mail.receid" cols="30" rows="10"></textarea></div>
			          <div style="text-align: left;"><span>收件人邮箱:</span><p style="display: inline-block;margin-left: 20px;margin-top: 5px;" v-text="mail.sendpeople"></p></div>
              <button style="width: 80px;" @click="huifu(mail.sendpeople,mail.recepeople,mail.receid)">回复</button>
			        <!-- 内容结束 -->
			      </div>
			      <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			    </div>
			  </div>
			</div>
			<!-- 模态框结束 -->
          </div>
          <footer style="text-align: center;">
              <button @click="prevPage()">
                  上一页
              </button>
              <span>第{{currentPage}}页/共{{totalPage}}页</span>
              <button @click="nextPage()">
                  下一页
              </button>
          </footer>
      </div>
      <p v-text="mailList" style="display: none;"></p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "mymail",
    data() {
      return {
        mailList:'',
        //分页
        totalPage: 1, // 统共页数，默认为1
        currentPage: 1, //当前页数 ，默认为1
        pageSize: 14, // 每页显示数量
        currentPageData: [] //当前页显示内容
      }
    },
    created:function() {
        this.huoqudata();
    },
    beforeUpdate:function(){
        this.fenye()
      },
	methods:{
    // 设置当前页面数据，对数组操作的截取规则为[0~10],[10~20]...,
    setCurrentPageData:function() {
         let begin = (this.currentPage - 1) * this.pageSize;
         let end = this.currentPage * this.pageSize;
         this.currentPageData = this.mailList.slice(begin,end);
     },
     //上一页
     prevPage:function() {
         // console.log(this.currentPage);
         if (this.currentPage == 1) return;
          this.currentPage--;
          this.setCurrentPageData();
     },
     // 下一页
     nextPage:function() {
         if (this.currentPage == this.totalPage)return ;
          this.currentPage++;
          this.setCurrentPageData();
     },
		openhuifu:function(){
		  $("#huifu").modal({backdrop: 'static', keyboard: false});  //手动开启
		},
		opencard:function(){
		  $("#myModacard").modal({backdrop: 'static', keyboard: false});  //手动开启
		},
	  huoqudata:function(){
		  var than=this;
		  var userEmail=window.sessionStorage.getItem('userEmail');
		  this.axios.get("http://localhost:9000/selectreceipt?email="+userEmail).then(function(response){
				// console.log(response)
				than.mailList=response.data;
			})
	  },
	  shanchu:function(id){
		  // alert(id)
		  var than=this;
		  this.axios.get("http://localhost:9000/drece?id="+id).then(function(response){
			alert("删除成功");
			var userEmail=window.sessionStorage.getItem('userEmail');
			than.axios.get("http://localhost:9000/selectreceipt?email="+userEmail).then(function(response){
				// console.log(response)
				than.mailList=response.data;
			})
			// console.log(response)
		})
	  },
	  //回复部分
	  //因为是回复表  所以发件人要变成收件人   收件人要变成发件人
	   huifu:function(fajian,shoujian,id){
        var height = $("#huifutitle"+id).val();
        var content = $("#huifucontent"+id).val();
        var userEmail=window.sessionStorage.getItem('userEmail');
        var date=this.getDate();     //这里调用方法
        if(height != "" & content != ""){
          $.ajax({
            type:'POST',
            url:"http://localhost:9000/huifumail",
            data:{
          	  "recetitle":height,
          	  "rececontent":content,
          	  "sendpeople":userEmail,
          	  "recedate":date,
          	  "recepeople":fajian,
          	  "email":userEmail
            },
            dataType:'text',
            success:function(data){
              alert("回复成功"	)
              document.getElementById("huifutitle"+id).value="";
              document.getElementById("huifucontent"+id).value="";
            },
            error:function(){
          	  alert("回复失败")
            },
            complete:function(){
          	console.log("ajax请求完事，最终操作在这里完成")
            },
          })
        }else{
          alert("请输入标题或内容!")
        }


        // console.log("标题为----->"+height);
        // console.log("内容为----->"+content);
        // console.log("发送者为----->"+userEmail);
        // console.log("时间为----->"+date);
        // console.log("收件者为----->"+fajian);
        // console.log("备用email为----->"+shoujian);

	        },
	        getDate:function() {     //这里返回时间
	          var date = new Date();
	              var seperator1 = "-";
	              var seperator2 = ":";
	              var month = date.getMonth() + 1;
	              var strDate = date.getDate();
	              if (month >= 1 && month <= 9) {
	                  month = "0" + month;
	              }
	              if (strDate >= 0 && strDate <= 9) {
	                  strDate = "0" + strDate;
	              }
	              var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
	                      + " " + date.getHours() + seperator2 + date.getMinutes()
	                      + seperator2 + date.getSeconds();

	              return currentdate;
	        },
          //分页
          fenye:function(){
            // console.log("得到的数据为"+this.mailList);
            // 计算一共有几页
            this.totalPage = Math.ceil(this.mailList.length / this.pageSize);
            // console.log("asdsdsdsdsd->"+this.totalPage)
            // 计算得0时设置为1
            this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
            this.setCurrentPageData();
            // console.log("总页面数为--->"+this.totalPage);
          },
    },

  }
</script>

<style>

</style>
